<template>
  <view class="page-index">
    <uni-swiper-dot @clickItem="clickItem" :info="swiperList" :dots-styles="dotsStyle" :current="current" :mode="mode" field="content">
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="true">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image :src="item.cover.startsWith('http') ? item.cover : `${imgUrl}${item.cover}`" alt="" class="swiper-img" mode="aspectFit" />
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view class="menu">
      <uni-row :gutter="20">
        <uni-col :span="8" v-for="(item, index) in menuList" :key="index">
          <view class="menu-item" :class="`is-${item.type}`" @click="handleGo(item)">
            <image :src="item.url" alt="" class="menu-img" mode="aspectFill" />
            <view class="menu-title">{{ item.title }}</view>
            <view class="menu-option">
              <view class="option-text">{{ $t('index.点击进入') }}</view>
              <image src="~@/static/images/index/enter.webp" alt="" class="option-img" mode="aspectFill" />
            </view>
          </view>
        </uni-col>
      </uni-row>
    </view>
    <view class="title-wrapper">
      <view class="title">
        <image src="~@/static/images/index/more01.webp" alt="" class="title-img" mode="aspectFill" />
        <view>{{ $t('index.活动专区') }}</view>
      </view>
      <view class="options" @click="handleGoNotice">
        <view class="label">{{ $t('index.更多') }}</view>
        <uni-icons type="right" size="20" color="#999"></uni-icons>
      </view>
    </view>
    <view :gutter="28" class="special">
      <view class="special-item" v-for="(item, index) in specialList" :key="index" @click="handleGoActivityDetail(item)">
        <image :src="`${imgUrl}${item.cover}`" alt="" class="special-img" mode="aspectFill" />
        <view class="special-title">{{ item.title }}!</view>
      </view>
    </view>
    <view class="title-wrapper">
      <view class="title">
        <image src="~@/static/images/index/more01.webp" alt="" class="title-img" mode="aspectFill" />
        <view>{{ $t('index.项目推荐') }}</view>
      </view>
      <view class="options" @click="handleGoProject">
        <view class="label">{{ $t('index.更多') }}</view>
        <uni-icons type="right" size="20" color="#999"></uni-icons>
      </view>
    </view>
    <view class="project">
      <view class="project-item" v-for="(item, index) of projectList" :key="index" @click="handleGoProjectDetail(item)">
        <view class="item-top">
          <view class="item-avatar">
            <image :src="`${imgUrl}${item.doctor.avatar}`" alt="" class="avatar-img" mode="aspectFill" />
            <view class="name">{{ item.doctor.doctorName }}</view>
          </view>
          <view class="item-info">
            <view class="info-title">{{ item.title }}</view>
            <view class="info-desc">{{ item.subTitle }}</view>
            <view class="info-commission">
              <view class="label">{{ $t('index.项目提成') }}:</view>
              <view class="value">{{ item.pencent }}%</view>
            </view>
            <view class="info-time">{{ item.createdAt }}</view>
          </view>
          <view class="item-btn">{{ $t('index.预约') }}</view>
        </view>
        <view class="item-footer">
          <view>{{ item.price }}</view>
          <view>($)</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import { bannar, article, projectListHot } from '@/api/home.js'
  import config from '@/config'

  export default {
    data() {
      return {
        current: 0,
        mode: 'round',
        swiperDotIndex: 0,
        swiperList: [],
        dotsStyle: {
          backgroundColor: '#fff',
          color: '#fff',
          selectedBackgroundColor: '#00bebe',
          selectedBorder: '1px #00bebe solid'
        },
        menuList: [
          {
            url: require('@/static/images/index/menu01.png'),
            title: this.$t('index.个人订单'),
            type: 'order'
          },
          {
            url: require('@/static/images/index/menu02.png'),
            title: this.$t('index.代理中心'),
            type: 'agent'
          },
          {
            url: require('@/static/images/index/menu03.png'),
            title: this.$t('index.项目列表'),
            type: 'project'
          }
        ],
        specialList: [],
        projectList: [],
        imgUrl: config.imgUrl
      }
    },
    onPullDownRefresh() {
      this.setTabBar()
      this.getBanner()
      this.getArticle()
      this.getProjectList()
      uni.stopPullDownRefresh()
    },
    methods: {
      // 设置tabBar
      setTabBar() {
        uni.setTabBarItem({
          index: 0,
          text: this.$t('tabBar.首页')
        })
        uni.setTabBarItem({
          index: 1,
          text: this.$t('tabBar.项目')
        })
        uni.setTabBarItem({
          index: 2,
          text: this.$t('tabBar.客服')
        })
        uni.setTabBarItem({
          index: 3,
          text: this.$t('tabBar.我的')
        })
      },
      //改变
      change(e) {
        this.current = e.detail.current
      },
      // 点击
      clickItem(e) {
        this.swiperDotIndex = e
      },
      //跳转
      handleGo(item) {
        console.log(item)
        switch (item.type) {
          case 'order':
            this.$tab.navigateTo(`/pages/order/index?type=all`)
            break
          case 'agent':
            this.$tab.navigateTo('/pages/agent/index')
            break
          case 'project':
            this.$tab.switchTab('/pages/project/index')
            break
        }
      },
      //活动专区
      handleGoNotice() {
        this.$tab.navigateTo('/pages/mine/notice/index')
      },
      //活动详情
      handleGoActivityDetail(item) {
        this.$tab.navigateTo(`/pages/activity/index?id=${item.id}`)
      },
      //项目推荐
      handleGoProject() {
        this.$tab.switchTab('/pages/project/index')
      },
      //项目详情
      handleGoProjectDetail(item) {
        this.$tab.navigateTo(`/pages/project/detail?id=${item.id}`)
      },
      //获取轮播图
      getBanner() {
        bannar().then((res) => {
          let { data } = res.result
          this.swiperList = data
        })
      },
      //活动专区
      getArticle() {
        article().then((res) => {
          let { data } = res.result
          this.specialList = data.slice(0, 2)
        })
      },
      //获取项目列表
      getProjectList() {
        this.$modal.loading('loading', 'loading')
        let par = {
          is_recommend: 1
        }
        projectListHot(par)
          .then((res) => {
            let { data } = res.result
            this.projectList = data
            this.$modal.closeLoading()
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      }
    },
    created() {
      this.setTabBar()
      this.getBanner()
      this.getArticle()
      this.getProjectList()
    }
  }
</script>
<style scoped lang="scss">
  .page-index {
    .swiper-box {
      height: 287px;
      .swiper-img {
        width: 100vw;
        height: 287px;
        background: #d4e7f8;
      }
    }
    .menu {
      height: 100px;
      margin: 20rpx 20rpx;
      .menu-item {
        position: relative;

        .menu-img {
          width: 100%;
          height: 100px;
          border-radius: 0 20rpx 0 20rpx;
        }
        .menu-title {
          position: absolute;
          left: 10px;
          top: 36px;
          font-size: 26rpx;
        }
        .menu-option {
          position: absolute;
          left: 10px;
          top: 60px;
          display: flex;
          align-items: center;
          font-size: 16rpx;
          padding: 4rpx 8rpx;
          color: #ffffff;
          border-radius: 4rpx;
          .option-text {
            margin-right: 4rpx;
          }
          .option-img {
            width: 20rpx;
            height: 20rpx;
          }
        }
        &.is-order {
          .menu-title {
            color: #f08616;
          }
          .menu-option {
            background-color: #ffb15e;
          }
        }
        &.is-agent {
          .menu-title {
            color: #66ad6d;
          }
          .menu-option {
            background-color: #8fc294;
          }
        }
        &.is-project {
          .menu-title {
            color: #4e60cc;
          }
          .menu-option {
            background-color: #7688ef;
          }
        }
      }
    }
    .title-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      padding: 0 20rpx;
      .title {
        font-size: 30rpx;

        color: #101010;
        display: flex;
        align-items: center;
        .title-img {
          width: 25px;
          height: 25px;
          margin-right: 8rpx;
        }
      }
      .options {
        display: flex;
        align-items: center;
        .label {
          color: #999;
          margin-right: 4rpx;
        }
      }
    }
    .special {
      width: 100vw;
      padding: 10rpx 20rpx;
      display: flex;
      height: 114px;
      .special-item {
        position: relative;
        display: inline-block;
        height: 104px;
        width: 50%;
        & + .special-item {
          margin-left: 50rpx;
        }
        .special-img {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
        .special-title {
          position: absolute;
          right: 10px;
          top: 30px;
          font-size: 26rpx;
          color: #ffffff;
        }
        .menu-option {
          position: absolute;
          left: 10rpx;
          top: calc(50% + 20rpx);
          display: flex;
          align-items: center;
          font-size: 16rpx;
          padding: 4rpx 8rpx;
          color: #ffffff;
          border-radius: 4rpx;
          .option-text {
            margin-right: 8rpx;
          }
        }
      }
    }
    .special:last-child {
      margin-right: 0;
    }
    .project {
      padding: 0 24rpx;
      .project-item {
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        .item-top {
          display: flex;
          align-items: center;
          .item-avatar {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 88px;
            min-height: 88px;
            .avatar-img {
              width: 60px;
              height: 60px;
            }
            .name {
              font-size: 24rpx;
              margin-top: 8rpx;
              text-align: center;
            }
          }
          .item-info {
            flex: 1;
            overflow: hidden;
            font-size: 24rpx;
            .info-title {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #101010;
              font-size: 28rpx;
            }
            .info-desc {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #999;
              margin-top: 10rpx;
            }
            .info-commission {
              display: flex;
              align-items: center;
              margin-top: 10rpx;
              .label {
                color: #666;
              }
              .value {
                color: #d3955c;
              }
            }
            .info-time {
              margin-top: 10rpx;
              color: #666;
            }
          }
          .item-btn {
            height: 65rpx;
            line-height: 65rpx;

            text-align: center;
            color: #fff;
            background-color: #31b2b5;
            margin-left: 20rpx;
            padding: 0 60rpx;
            border-radius: 30rpx;
          }
        }
        .item-footer {
          display: flex;
          justify-content: flex-end;
          margin: 10rpx 0;
          font-size: 28rpx;
          color: #d3955c;
        }
      }
    }
  }
</style>
